<?php $this->load->view('header'); ?>
<div class="wrap-intro">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h2 class="logo-app"><?php echo $this->lang->line("Join the world's largest professional network.");?></h2>
            </div>
            <div class="app-form app-signup col-lg-12 col-xs-12 col-sm-12">
            	<div class="col-md-5 col-sm-5">
                	<img class="img-responsive" src="<?php echo base_url()?>/app/css/images/bg_login.png">
                </div>
                <div class="col-md-7 col-sm-7">
                	<form id="form-signup" method="POST" role="form">
	                    
	                    <div class="col-md-12">
                    		<h2><?php echo $this->lang->line('Register');?></h2>
                    	</div>
                    	<div class="col-md-12 no-padding">
	                        <div class="col-md-6 col-sm-6 form-group">
	                            <input type="text" name="email" id="email" class="form-control" value="<?php echo set_value('email')?>"  placeholder='Email'>
	                        	<span><?php echo form_error('email')?></span>
	                        </div>
	                        <div class="col-md-6 col-sm-6 form-group">
	                             <input type="text" name="username" id="username" value="<?php echo set_value('username')?>" class="form-control" placeholder='<?php echo $this->lang->line('username')?>'>
	                        	<span><?php echo form_error('username')?></span>
	                        </div>
                        </div>
                        <div class="form-group line-input">
	                        <div class="col-md-6 col-sm-6">
	                            <input type="password" name="password" id="password" value="<?php echo set_value('password')?>" class="form-control"  placeholder='<?php echo $this->lang->line('password')?>'>
	                        	<span><?php echo form_error('password')?></span>
	                        </div>
	                        <div class="col-md-6 col-sm-6">
	                            <input type="password" name="confirm-password" id="confirm-password" value="<?php echo set_value('confirm-password')?>" class="form-control" id="exampleInputEmail1" placeholder='<?php echo $this->lang->line('Confirm Password')?>'>
	                        	<span><?php echo form_error('confirm-password')?></span>
	                        </div>
                        </div>
	                    <div class="col-md-12">
	                        <label class="col-lg-4 col-md-4 no-padding"><?php echo $this->lang->line("I'm looking for")?></label>
	                        <span class="col-lg-4 col-md-4" style="text-align: right;">
	                            <label>
	                                <input <?php echo set_radio('role_id',1,TRUE)?> name="role_id" type="radio" value="1" >
	                                <?php echo $this->lang->line('Hire');?>
	                            </label>
	                        </span>
	                        <span class="col-lg-4 col-md-4">
	                            <label>
	                                <input type="radio" <?php echo set_radio('role_id',2)?> name="role_id" value="2" >
	                                <?php echo $this->lang->line('Work');?>
	                            </label>
	                        </span>
	                    </div>
                        <input type="hidden" value="" name="avatar-facebook" id="img-avatar-facebook" />
	                    <p class="col-md-12"><?php echo $this->lang->line('Login with your facebook or applancer account')?></p>
	                    <div class="form-group">
	                        <div class="col-md-6">
	                            <button type="submit" name="buyerConfirm" value="buyerConfirm" class="btn btn-create btn-lg col-sm-12 col-md-12 col-xs-12">
		                            <i class="icon_edit"></i>
		                            <?php echo $this->lang->line('Register')?>
	                            </button>
                            </div>
                           	<div class="col-md-6">
<!--                                <a href="--><?php //echo $facebook_url?><!--">link</a>-->
	                           	<button data-id="<?php echo $this->uri->segment(3,'0');?>" type="button" style="margin-top: 0px;" class="btn-login-facebook btn btn-facebook col-sm-12 col-md-12 col-xs-12 btn-lg btn-block">
	                           		<i class="icon_facebook"></i>
	                                <?php echo $this->lang->line('Login Facebook');?>
	                            </button>

								<a title="google" data-id="<?php echo $this->uri->segment(3,0)?>" id="btn-google" href="javascript:void(0);" onclick="javascript:initiateSignIn();">Đăng ký Google</a>
                           	</div>
                        </div>
                	</form>
            	</div>
            </div> <!-- app-form-login -->
            <div class="modal fade bs-example-modal-sm" id="show-info-facebook" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="row">
                            <div style="margin:0 auto;display: none" id="loading-image"></div>
                            <div id="avatar-facebook" style="padding: 30px;" class="col-lg-12 text-center">
                                <img class="img-thumbnail"   style="width: 140px; height: 140px;">
                                <span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /.container -->
</div> <!-- wrap intro -->
<script>
    $(document).ready(function(){
        $("#form-signup").validate({
        	errorElement: "span", // contain the error msg in a span tag
            errorClass: 'help-block',
            onkeyup : false,
            
            errorPlacement: function (error, element) { // render error placement for each input type
                if (element.attr("type") == "radio" || element.attr("type") == "checkbox") { // for chosen elements, need to insert the error after the chosen container
                    error.insertAfter($(element).closest('.form-group').children('div').children().last());
                } else if (element.attr("name") == "dd" || element.attr("name") == "mm" || element.attr("name") == "yyyy") {
                    error.insertAfter($(element).closest('.form-group').children('div'));
                } else {
                    error.insertAfter(element);
                    // for other inputs, just perform default behavior
                }
            },
            highlight: function (element) {
                $(element).closest('.help-block').removeClass('valid');
                // display OK icon
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
                $(element).closest('.form-group').find(".glyphicon-ok").remove();
                $(element).after("<span class='glyphicon glyphicon-remove form-control-feedback'></span>");
                // add the Bootstrap error class to the control group
            },
            unhighlight: function (element) { // revert the change done by hightlight
                $(element).closest('.form-group').removeClass('has-error');
                
                // set error class to the control group
            },
            success: function (label, element) {
                label.addClass('help-block');
                // mark the current input as valid and display OK icon
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
                $(element).closest('.form-group').find(".glyphicon-remove").remove();
                $(element).after("<span class='glyphicon glyphicon-ok form-control-feedback'></span>");
            },
            rules:{
                "email" : {
                    required : true,
                    email : true,
                    minlength:5,
                    remote:{
                        url: "<?php echo site_url('buyer/checkUserEmailInfo');?>",
                        type : "POST",
                    }
                },
                "password" : {
                    required : true,
                    minlength : 8
                },
                "username" : {
                    required : true,
                    minlength :5,
                    remote:{
                        url: "<?php echo site_url('buyer/checkUserNameInfo');?>",
                        type : "POST",
                    }
                },
                "confirm-password" : {
                    equalTo : "#password",
                    required : true,
                    minlength : 6
                }
            },
            messages:{
                "email":{
                    required : "<?php echo $this->lang->line('Email')." ".$this->lang->line('required') ?>",
                    email : "<?php echo $this->lang->line('Email')." ".$this->lang->line('valid_email') ?>",
                    minlength : "<?php echo $this->lang->line('Email')." ".$this->lang->line('min_length'); ?>",
                    remote :  "<?php echo $this->lang->line('Email')." ".$this->lang->line('is_unique'); ?>",
                },
                "username":{
                    required : "<?php echo $this->lang->line('Username')." ".$this->lang->line('required') ?>",
                    minlength : "<?php echo $this->lang->line('Username')." ". $this->lang->line('min_length'); ?>",
                    remote :  "<?php echo $this->lang->line('Username')." ".$this->lang->line('is_unique'); ?>",
                },
                "password":{
                    required : "<?php echo $this->lang->line('Password')." ".$this->lang->line('required') ?>",
                    minlength : "<?php echo $this->lang->line('Password')." ".$this->lang->line('min_length'); ?>"
                },
                "confirm-password":{
                    required : "<?php echo $this->lang->line('Confirm Password')." ".$this->lang->line('required') ?>",
                    equalTo : "<?php echo $this->lang->line('Confirm Password')." ".$this->lang->line('matches') ?>",
                    minlength : "<?php echo $this->lang->line('Confirm Password')." ".$this->lang->line('min_length'); ?>"
                }
            }


        });

    });
    //src="https://graph.facebook.com///$user_profile['id']/picture?type=large"
    $('#btn-login-facebook').click(function(){
        $.ajax({
           type:"POST",
            url: '<?php echo site_url('users/registerFacebook')?>',
            beforeSend: function(){
                $('#show-info-facebook').modal('show');
                $('#loading-image').show();
                $('#avatar-facebook').hide();
            },
            success:function(data){

                if(data.status = 'success') {
                    var data = $.parseJSON(data);
                    $('#avatar-facebook').show();
                    //console.log(data.data.id);
                    $('#loading-image').hide();
                    $('#avatar-facebook img').attr('src', "https://graph.facebook.com/" + data.data.id + "/picture?type=large");
                    $('#avatar-facebook span').text(data.data.email);
                    $('#email').val(data.data.email);
                    $('#img-avatar-facebook').val("https://graph.facebook.com/" + data.data.id + "/picture?type=large");
                }
            }
        });

    });
</script>
<?php $this->load->view('footer'); ?>



		
